<template>
    <div class="opacity">
        <Slider
            :onChange="onChange"
            typeKey="opacity"
            lw="40%"
            :precentage="true"
            :min="0"
            :max="100"
            :step="1"
        >
            <template #left>
                <span>不透明度</span>
            </template>
            <template #right>
                <!-- <span>{{ parseInt(scope.data * 100) }}%</span> -->
                <InputNumber
                    type="opacity"
                    :prefix="false"
                    :endfix="false"
                    :initValue="{
                        opacity: parseInt(Number(selectedItem && selectedItem.opacity) * 100)
                    }"
                    @change="onInputChange"
                >
                    <!-- <template #endfix>%</template> -->
                </InputNumber>
            </template>
        </Slider>
    </div>
</template>
<script>
import Slider from './slider.vue'
import InputNumber from './data-input.vue'
import { mapState } from 'vuex'
export default {
    components: {
        Slider,
        InputNumber
    },
    props: {
        onChange: {
            type: Function
        }
    },
    computed: {
        ...mapState({
            selectedItem: (state) => state.selectedItem
        })
    },
    methods: {
        onInputChange(value) {
            value.opacity = Number(value.opacity) / 100
            this.onChange(this.selectedItem, value)
        }
    }
}
</script>
<style lang="scss" scoped>
:deep(.data-input) {
    background: white;
    &:hover {
        border-color: white;
        background: rgba(0, 0, 0, 0.04);
    }
}
.opacity :depp(.el-slider__bar) {
    background-color: #d9dcdf !important;
}
</style>
